<template>

  <el-form ref="form" :rules="rules" :model="formEvent.form" label-width="120px" :size="size">
    <div style="display:flex">
      <!-- {{OptionData.OptionData_yxzt}} -->
      <el-row :gutter="16">
        <!-- 通过调整lg的大�?  12 24/3=12 会变为一�?3�? -->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="单位" prop="deptName">
            <el-input v-model="formEvent.form.deptName" disabled>物资类别</el-input>

          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="物资类别" prop="wzlbmc">
            <el-input v-model="formEvent.form.wzlbmc" disabled>物资类别</el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="设备类型" prop="sblxmc">
            <el-input v-model="formEvent.form.sblxmc" disabled></el-input>

          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="设备名称" prop="sbmc">
            <el-input v-model="formEvent.form.sbmc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="出厂编码" prop="factoryNo">
            <el-input v-model="formEvent.form.factoryNo" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="所属库房" prop="sskfmc">
            <el-input v-model="formEvent.form.sskfmc" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="规格" prop="sbgg">
            <el-input v-model="formEvent.form.sbgg" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="型号" prop="xh">
            <el-input v-model="formEvent.form.xh" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="计量方式" prop="jlfsmc">
            <el-input v-model="formEvent.form.jlfsmc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="出厂日期" prop="ccrq">
            <!-- <el-input v-model=""></el-input> -->
            <el-date-picker
              style="width:100%"
              v-model="formEvent.form.ccrq"
              type="date"
              placeholder="选择日期" disabled>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="PT" prop="pt">
            <el-input v-model="formEvent.form.pt" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="CT" prop="ct">
            <el-input v-model="formEvent.form.ct" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="运行状态" prop="yxztmc">
            <el-input v-model="formEvent.form.yxztmc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="厂家" prop="cjmc">
            <el-input v-model="formEvent.form.cjmc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="是否已检测" prop="ifTest">
            <el-input v-if="formEvent.form.ifTest==1" value="是" disabled></el-input>
            <el-input v-else value="否" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="是否贴签" prop="sftq">
            <el-input v-if="formEvent.form.sftq==1" value="是" disabled></el-input>
            <el-input v-else value="否" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="坐标" prop="receivingCoordinate">
            <el-input v-model="formEvent.form.receivingCoordinate" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="地址" prop="sbdz">
            <el-input v-model="formEvent.form.sbdz" disabled></el-input>
          </el-form-item>
        </el-col>


        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="创建人" prop="creator">
            <el-input v-model="formEvent.form.creator" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="创建时间" prop="createTime">
            <el-input v-model="formEvent.form.createTime" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16" style="margin-left:20px">

        <div style="margin-bottom: 20px;">

          <img :src="sbzpimg" class="avatar" alt="暂无图片">
          <div class="sbtext">设备图片</div>

        </div>
        <div>

          <img :src="img" class="avatar" alt="暂无图片">
          <div class="sbtext">二维码图片</div>
        </div>

      </el-row>

    </div>

    <!-- 主键是不可以编辑的，不可查看�? -->
    <el-input v-model="formEvent.form.sbbm" v-show="false"></el-input>
    <!-- <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-form-item class="tool-button-container">
          <el-button
            @click="closeEvent()"
            :size="size"
            icon="fa fa-minus-square-o"
          >
            取消</el-button
          >
          <el-button
            type="primary"
            @click="submitEvent()"
            :size="size"
            icon="fa fa-save (alias)"
          >
            确定</el-button
          >
        </el-form-item>
      </el-col>
    </el-row> -->
  </el-form>
</template>

<script>
import {TBizcEneryEquipApi} from '@/api/equip/tBizcEneryEquipApi.js'
import {CommonApi} from '@/api/equip/CommonApi.js'
import {FormEvent} from "../model/countList-form";
import {formModel, GridEvent} from '../model/countList-table'
import {reactive} from "vue";
import {accountQueryApi} from '@/api/equip/accountQueryApi.js'
import {warehouseManagement} from '@/api/equip/warehouseManagement.js'
import {generateQRCode} from '@/api/equip/generateQRCode.js'

export default {
  name: "equipmentMaintenanceForm",
  props: {
    formData: {
      type: Object,
    },
  },
  data() {
    let GLOBAL_URL;
    return {
      sbzpimg: '',
      img: '',
      imageURL: GLOBAL_URL.CDN_URL + "/cdn/zzgd-img/",
      udsImageUrl: GLOBAL_URL.UDS_URL + "/FileController/downFile/",
      file_list: [],
      size: "small",
      formEvent: reactive(FormEvent),
      formData: {
        cjr: 'admin',
        cjtiime: new Date() + ''
      },
      rules: reactive(FormEvent).rules,
      // OptionData:formEvent.OptionData
      OptionData: {
        OptionData_yxzt: GridEvent.OptionData_yxzt,
        OptionData_sblxmc: [],
        OptionData_gldw: [],
        // OptionData_ssnyzmc:GridEvent.OptionData_ssnyzmc,
        OptionData_jlfs: GridEvent.OptionData_jlfs,
        OptionData_sskfmc: []
      },
    };
  },
  mounted() {
    this.formEvent.initFormData(this.formData);
    // this.formEvent.form.cjr = 'admin'
    // this.formEvent.form.cjtime = moment().format("YYYY-MM-DD HH:mm:ss")
    this.OptionData_sblxmc(),
      this.OptionData_gldw()
    this.getEwmData(this.formEvent.form)
  },
  computed: {
    computedPhoto() {
      if (this.formEvent.form.sbzp && this.formEvent.form.sbzp.length > 10) {
        if (this.formEvent.form.sbzp.startsWith("http")) {
          return this.formEvent.form.sbzp;
        } else {
          console.log(this.udsImageUrl + this.formEvent.form.sbzp + "/user.png")
          return this.udsImageUrl + this.formEvent.form.sbzp + "/user.png"

        }
      }
      // return this.imageURL+'photoDefault.png'
    }
  },
  methods: {
    getEwmData(row) {
      let sbzp = row.sbzp ? row.sbzp.split(',')[0] : ""//设备照片
      this.sbzpimg = this.udsImageUrl + sbzp + "/user.png"
      console.log(this.imgsrc)
      generateQRCode.getEwmData(row.sbbm).then(res => {
        this.img = res.data[0].ewm
      }).catch(err => {
        console.log(err)
      })
    },
    OptionData_gldw() {
      TBizcEneryEquipApi.queryDictData('EN_EQUIP_GLDW').then(res => {
        res.data.forEach((item) => {
          this.OptionData.OptionData_gldw.push({
            label: item.value, value: item.code
          })
        })

      }).catch(err => {


      })
    },
    OptionData_sblxmc() {
      accountQueryApi.queryDictDatasb('1000').then(res => {
        res.data.forEach((item) => {
          this.OptionData.OptionData_sblxmc.push({
            label: item.name, value: item.id
          })
        })

      }).catch(err => {

      })


    },
    allowUpload(file) {  //判断是否允许上传
      return new Promise((resolve, reject) => {

        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/bmp' || file.type === 'image/jpg' || file.type === 'image/gif';
        if (!isJpgOrPng) {
          this.$message.error('非图片格式：jpeg/png/bmp/jpg/gif');
          return reject(false);
        }
        return resolve(true) //如没有问题了那咱们就通过resolve函数添加一个true 让文件上传

      })
    },
    updatePhoto(file, fileList) {
      this.file_list = fileList
      var formData = new FormData();
      formData.append("uploadFiles", file.raw);
      formData.append("fileId", this.formEvent.form.sbbm);
      formData.append("p_id", this.formEvent.form.sbbm);
      formData.append("user_name", "system");
      formData.append("table_name", "en_equip.t_en_wz_equip");
      // formData.append("table_name","en_equip-t_en_wz_equip");
      formData.append("col_name", "sbzp");
      formData.append("bizcType", "0");
      CommonApi.uploadImage(formData).then(res => {
        if (res) {
          const fileId = res.fileid;
          this.formEvent.form.sbzp = fileId;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    onchange_sskf(val) {
      this.formEvent.form.sskfmc = ''
      if (val) {
        let arr = this.OptionData.OptionData_sskfmc.filter(item => {
          return item.value == val;
        })
        if (arr && arr.length > 0) {
          this.formEvent.form.sskfmc = arr[0].label;
        }
      }
    },
    onchange_yxzt(val) {

      this.formEvent.form.yxztmc = ''
      //  debugger
      if (val) {
        let arr = this.OptionData.OptionData_yxzt.filter(item => {
          return item.value == val;
        })
        if (arr && arr.length > 0) {
          this.formEvent.form.yxztmc = arr[0].label;
        }
      }
    },
    onchange_jlfs(val) {

      this.formEvent.form.jlfsmc = ''
      //  debugger
      if (val) {
        let arr = this.OptionData.OptionData_jlfs.filter(item => {
          return item.value == val;
        })
        if (arr && arr.length > 0) {
          this.formEvent.form.jlfsmc = arr[0].label;
        }
      }
    },
    onchange_sblx(val) {

      this.formEvent.form.sblxmc = ''
      //  debugger
      if (val) {
        let arr = this.OptionData.OptionData_sblxmc.filter(item => {
          return item.value == val;
        })
        if (arr && arr.length > 0) {
          this.formEvent.form.sblxmc = arr[0].label;
        }
      }
    },
    onchange_gldw(val) {

      this.formEvent.form.gldwmc = ''
      // debugger
      if (val) {
        let arr = this.OptionData.OptionData_gldw.filter(item => {
          return item.value == val;
        })
        if (arr && arr.length > 0) {
          this.formEvent.form.gldwmc = arr[0].label;
        }
        warehouseManagement.getKfByGldw(val).then(res => {
          this.OptionData.OptionData_sskfmc = []
          res.data.forEach((item) => {
            this.OptionData.OptionData_sskfmc.push({
              label: item.kfName, value: item.id
            })
          })
        }).catch(err => {

        })
      }
    },
    // 移除图片
    photoRemove(file, fileList) {
      // this.photoHide = false;
      this.file_list = []
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    closeEvent() {
      //关闭窗口事件,不刷�?//
      this.$emit("closeEvent", false);
    },
    submitEvent() {
      //关闭窗口事件,刷新表格数据//
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formEvent
            .saveFormData()
            .then((res) => {
              this.$emit("closeEvent", true);
              this.$message.success("保存成功!");
            })
            .catch((err) => {
              console.error(err);
            });
        } else {
          return false;
        }
      });

    },
  },
};
</script>
<style>
.styleA .el-upload--text {
  width: 130px;
  height: 180px;
  line-height: 180px;
}

.styleB .el-upload--text {
  display: none;
}
</style>
<style scoped>
.tool-button-container {
  text-align: right;
}

.el-select {
  width: 100% !important
}

>>> .el-upload {
  width: 180px;
  height: 200px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 200px;
  text-align: center;
  font-size: 28px;
}

>>> .el-upload:hover {
  border-color: #409EFF;
}

>>> .avatar-uploader-icon {

  color: #8c939d;
  width: 178px;
  height: 230px;

}

.sbtext {
  width: 175px;
  height: 25px;
  line-height: 27px;
  background: #0e867f;
  text-align: center;
  color: #fff;
  margin-top: 5px;
}

>>> .avatar {
  width: 175px;
  height: 210px;
  display: block;
}

.el-upload-list__item-thumbnail {
  width: 180px;
  height: 200px;
}
</style>
